<!DOCTYPE html>
<html lang="en">
   
   
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Data</title>
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./fonts/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href=" user.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <img src="./images/网易考拉logo.png" alt="error" />
        <p>个人信息登记系统</p>
    </div>
    <!-- 左侧标签 -->
    <div id="section">
        <!-- 导航 -->
        <div class="nav">
            <ul class="list-group">
                <li class="list-group-item list-group-item-info">
                    <a href="./overseaManagement.html">海外直购管理</a> </li>
                <li class="list-group-item list-group-item-danger">
                    <a href="./milk powder backstage.html">品质奶粉管理</a></li>
                <li class="list-group-item list-group-item-info">
                    <a href="./the admin of the charge.html">用户充值管理</a></li>
                <li class="list-group-item list-group-item-danger">
                    <a href="./user.html">用户信息管理</a></li>
                <li class="list-group-item list-group-item-info">
                    <a href="./exchange.html">积分兑换管理</a></li>
                <li class="list-group-item list-group-item-danger">
                    <a href="./discount coupon.html">优惠券管理</a></li>
            </ul>
        </div>
        <div class="body">
            <div id="list-example" class="list-group">

                <div class="user table">
                    <p class="text-justify">用户信息表</p>
                    <div>
                        姓名
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">查询</button>
                        </form>
                        <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#addModal">
        <i class="fa fa-plus" aria-hidden="true"></i>
        添加
      </button>
                    </div>
                    <div class="alert alert-warning alert-dismissible fade " role="alert">
                        <strong>警告!</strong> 确定要删除用户资料吗？
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
                    </div>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">编号</th>
                                <th scope="col">姓名</th>
                                <th scope="col">性别</th>
                                <th scope="col">年龄</th>
                                <th scope="col">密码</th>
                                <th scope="col">电话</th>
                                <th scope="col"> 邮箱</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>1</td>
                                <td>User</td>
                                <td>gender</td>
                                <td>age</td>
                                <td>password</td>
                                <td>tellphone</td>
                                <td>e-mail</td>
                                <td><button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
            删除
        </button>
                                    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#editModal">
            <i class="fa fa-plus" aria-hidden="true"></i>
           编辑
          </button>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>2</td>
                                <td>User</td>
                                <td>男</td>
                                <td>13</td>
                                <td>xxxx</td>
                                <td>159xxxx</td>
                                <td>@.com</td>
                                <td><button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
              删除
          </button>
                                    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#editModal">
              <i class="fa fa-plus" aria-hidden="true"></i>
             编辑
            </button>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>3</td>
                                <td>User</td>
                                <td>gender</td>
                                <td>age</td>
                                <td>password</td>
                                <td>tellphone</td>
                                <td>e-mail</td>
                                <td><button type="button" class="btn btn-outline-light button1 " data-toggle="modal" data-target="#delModal">
            删除
        </button>
                                    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#editModal">
            <i class="fa fa-plus" aria-hidden="true"></i>
           编辑
          </button>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <nav aria-label="...">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active" aria-current="page">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                            <button>
            <a href="./netease-koala/overseaManagement.html">返回</a>
          </button>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>



        <!--模态框-->
        <!-- Modal :添加-->
        <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">用户信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
                    </div>
                    <div class="modal-body">


                        <form>
                            <div class="form-group row">
                                <label for="staticEmail" class="col-sm-2 col-form-label">是否新增用户：</label>
                                <div class="col-sm-10">
                                    <div class="dropdown">
                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                      新增用户
                    </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#">姓名</a>
                                            <a class="dropdown-item" href="#">年龄</a>
                                            <a class="dropdown-item" href="#">手机号</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="inputPassword" class="col-sm-2 col-form-label">本次新增用户姓名：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inputPassword">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!--模态编辑-->
        <div class="modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                    </div>
                    <div class="modal-body">


                        <form>
                            <div class="form-group row">
                                <label for="staticEmail" class="col-sm-2 col-form-label">是否新增用户：</label>
                                <div class="col-sm-10">
                                    <div class="dropdown">
                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                          新增用户
                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a class="dropdown-item" href="#">新增用户</a>
                                            <a class="dropdown-item" href="#">姓名</a>
                                            <a class="dropdown-item" href="#">年龄</a>
                                            <a class="dropdown-item" href="#">手机号</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="inputPassword" class="col-sm-2 col-form-label">本次新增科目的名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inputPassword" value="四件套">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>